<!DOCTYPE html>
<html>

<head>
    <title>注册</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="header">
            <ul class="header-left">
                <li>
                    <a href="https://login.taobao.com/member/login.jhtml?f=top&redirectURL=https%3A%2F%2Freg.taobao.com%2Fmember%2Freg%2Ffast%2Funion_reg%3F_regfrom%3DTB" class="login">亲，请登录</a>
                    <a href="https://reg.taobao.com/member/reg/fast/union_reg?_regfrom=TB">免费注册</a>
                </li>
                <li>
                    <a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html">手机逛淘宝</a>
                </li>
                <li>
                    <a href="#">网页无障碍</a>
                </li>
            </ul>
            <ul class="header-right">
                <li><a href="https://www.taobao.com/">淘宝网首页</a></li>
                <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fi.taobao.com%2Fmy_taobao.html">我的淘宝</a><span>ˇ</span>
                    <ul class="menu">
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fbuyertrade.taobao.com%2Ftrade%2Fitemlist%2Flist_bought_items.htm">已卖到的宝贝</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=https%3A%2F%2Fweb.m.taobao.com%2Fapp%2Fmtb%2Fpc-itaotool%2FfootMark">我的足迹</a></li>
                    </ul>
                </li>
                <li>
                    <a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fcart.taobao.com%2Fcart.htm%3Ffrom%3Dmini%26pm_id%3D1501036000a02c5c3739"><img src="img/shopping.png">购物车</a>
                </li>
                <li>
                    <a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm"><img src="img/collect.png">收藏夹</a><span>ˇ</span>
                    <ul class="menu">
                        <li><a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm">收藏的宝贝</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fshop_collect_list_n.htm">收藏的店铺</a></li>
                    </ul>
                </li>
                <li><a href="https://huodong.taobao.com/wow/tbhome/act/market-list">商品分类</a> <a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm?spm=a21bo.7723600.1997563209.2.713a5ec99cDcKN#/">免费开店</a></li>
                <li><a href="https://loginmyseller.taobao.com/?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fmyseller.taobao.com%2Fhome.htm%2FQnworkbenchHome%2F%3Fspm%3Da21bo.7723600.1997525073.1.713a5ec9bQRvll">千牛卖家中心</a><span>ˇ</span>
                    <ul class="menu">
                        <li><a href="https://loginmyseller.taobao.com/?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fmyseller.taobao.com%2Fhome.htm%2FQnworkbenchHome%2F%3Fspm%3Da21bo.7723600.1997525073.2.713a5ec9j8zp4Q">开店入驻</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Ftrade.taobao.com%2Ftrade%2Fitemlist%2Flist_sold_items.htm%3Fspm%3Da21bo.7723600.1997525073.3.713a5ec9XN1ezd%26toNew%3Dtrue">已卖出的宝贝</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fsell.taobao.com%2Fauction%2Fgoods%2Fgoods_on_sale.htm%3Fspm%3Da21bo.7723600.1997525073.4.713a5ec9elFIih">出售中的宝贝</a></li>
                        <li><a href="https://fuwu.taobao.com/?spm=a21bo.7723600.1997525073.5.713a5ec9wqbpHU&tracelog=tbdd">卖家服务市场</a></li>
                        <li><a href="https://daxue.taobao.com/welcome.jhtml">卖家培训中心</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fhealthcenter.taobao.com%2Fhome%2Fhealth_home.htm">体检中心</a></li>
                        <li><a href="https://loginmyseller.taobao.com/?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fqn.taobao.com%2Fheadline%2Fnews%3Fspm%3Da21bo.7723600.1997525073.8.713a5ec9DFvyIi">电商学习中心</a></li>
                    </ul>
                </li>
                <li><a href="https://consumerservice.taobao.com/">联系客服</a><span>ˇ</span>
                    <ul class="menu">
                        <li><a href="https://ai.alimebot.taobao.com/intl/index.htm?from=WgevAY26kl">消费者客服</a></li>
                        <li><a href="https://helpcenter.taobao.com/servicehall/home">卖家客服</a></li>
                        <li><a href="https://login.taobao.com/member/login.jhtml?redirectURL=https%3A%2F%2Fmarket.m.taobao.com%2Fapp%2Ftbhome%2Ffeedback%2Findex.html%3Fspm%3Dservice_hall.25034491.754895749.4.7a223f35qVzoXK%26from%3Dhttps%253A%252F%252Fhelpcenter.taobao.com%252Fservicehall%252Fhome%23%2F">意见反馈</a></li>
                        <li><a href="https://market.m.taobao.com/app/im/chat/index.html?spm=service_hall.25034491.754895749.5.7a223f35207Iuf">网页版旺旺</a></li>
                    </ul>
                </li>
                <div class="clear"></div>
            </ul>
            <div class="clear"></div>
        </div>
    </header>
    <section>
        <div class="section">
            <div class="logo">
                <img src="img/logo.jpg" alt="">
                <span>用户注册</span>
                <div class="clear"></div>
            </div>
            <div class="form">
                <div class="phone">
                    <span>手机号码</span>
                    <div class="area">
                        <div class="areaName">
                            <p>中国大陆<span>+86▼</span></p>
                            <ul class="none">
                                <li class="bg">中国大陆<span>+86</span></li>
                                <li>中国香港<span>+852</span></li>
                                <li>中国澳门<span>+853</span></li>
                                <li>中国台湾<span>+886</span></li>
                                <li>韩国<span>+82</span></li>
                                <li>日本<span>+86</span></li>
                                <li>美国<span>+1</span></li>
                                <li>加拿大<span>+6</span></li>
                                <li>英国<span>+44</span></li>
                                <li>澳大利亚<span>+61</span></li>
                                <li>新加坡<span>+65</span></li>
                                <li>马来西亚<span>+60</span></li>
                                <li>泰国<span>+66</span></li>
                                <li>越南<span>+84</span></li>
                                <li>菲律宾<span>+63</span></li>
                                <li>印度尼西亚<span>+62</span></li>
                                <li>德国<span>+49</span></li>
                                <li>意大利<span>+39</span></li>
                            </ul>
                        </div>
                        <div class="areaphone">
                            <input type="text" maxlength="11" placeholder="请输入你的手机号码">
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="code">
                    <span>&emsp;验证码</span>
                    <div class="codeInput">
                        <input type="text" maxlength="6" placeholder="请输入效验码">
                        <span>获取验证码</span>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="submit">
                    <input type="submit" value="注 册">
                </div>
                <div class="agreement">
                    <input type="checkbox"> 已阅读并同意以下协议
                    <a href="#">淘宝平台服务协议</a> 、
                    <a href="#">隐私权政策</a> 、
                    <a href="#">法律声明</a> 、
                    <a href="#">支付宝及客户端服务协议</a>
                </div>
                <div class="register">

                    <a href="#">切换成企业账号注册</a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </section>
    <footer>
        <div class="footer">
            <div class="footer_link">
                <a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a><span>|</span>
                <a href="//www.alibaba.com">阿里巴巴国际站</a><span>|</span>
                <a href="//www.1688.com">阿里巴巴中国站 </a><span>|</span>
                <a href="//www.aliexpress.com">全球速卖通</a><span>|</span>
                <a href="//www.taobao.com">淘宝网 </a><span>|</span>
                <a href="//www.tmall.com">天猫</a><span>|</span>
                <a href="//ju.taobao.com">聚划算</a><span>|</span>
                <a href="//www.alimama.com">阿里妈妈</a><span>|</span>
                <a href="//www.aliyun.com">阿里云计算</a><span>|</span>
                <a href="//www.yunos.com">云OS</a><span>|</span>
                <a href="//wanwang.aliyun.com">万网</a><span>|</span>
                <a href="//www.alipay.com">支付宝</a>
            </div>
            <div class="copyright">
                <a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a>
                <a href="//www.taobao.com/about/partners.php">合作伙伴</a>
                <a href="//pro.taobao.com">营销中心</a>
                <a href="//service.taobao.com/support/main/service_route.htm">联系客服</a>
                <a href="//open.taobao.com">开放平台</a>
                <a href="//www.taobao.com/about/join.php">诚征英才</a>
                <a href="//consumerservice.taobao.com/contact-us">联系我们</a>
                <a href="//www.taobao.com/sitemap.php">网站地图</a>
                <a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a>
                <span>© 2022 Taobao.com 版权所有</span>
            </div>
            <div class="permit">
                网络文化经营许可证：<a href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a><span>|</span>增值电信业务经营许可证：浙B2-20080224-1<span>|</span>信息网络传播视听节目许可证：1109364号
            </div>
        </div>
    </footer>
</body>
<script>
    let areaName = document.querySelector('.areaName>p');
    let areaUl = document.querySelector('.areaName ul');
    let areaList = document.querySelectorAll('.areaName li');

    areaName.onclick = function() {
        areaUl.classList.toggle('none');
    }
    let areaArray = [
        '中国大陆',
        '中国香港',
        '中国澳门',
        '中国台湾',
        '韩国',
        '日本',
        '美国',
        '加拿大',
        '英国',
        '澳大利亚',
        '新加坡',
        '马来西亚',
        '泰国',
        '越南',
        '菲律宾',
        '印度尼西亚',
        '德国',
        '意大利'
    ];
    let codeArray = [
        '+86',
        '+852',
        '+853',
        '+886',
        '+82',
        '+86',
        '+1',
        '+6',
        '+44',
        '+61',
        '+65',
        '+60',
        '+66',
        '+84',
        '+63',
        '+62',
        '+49',
        '+39'
    ];
    for (let i = 0; i < areaList.length; i++) {
        areaList[i].onclick = function() {
            areaName.innerHTML = areaArray[i] + `<span>${codeArray[i]}` + `▼ </span>`

            // 移除其他 li 的 'bg' 类名
            for (let j = 0; j < areaList.length; j++) {
                areaList[j].classList.remove('bg');
            }
            // 给当前 li 添加 'bg' 类名
            this.classList.add('bg');

            areaUl.classList.add('none');
        }
    }
</script>

</html>